<template>
  <div class="scroll">
    <example-card title="List 表格" url="http://element.eleme.io/#/zh-CN/component/table">
      <div>
        <el-table
            :data="tableData"
            stripe
            border
            max-height="240"
            :default-sort="{prop: 'date', order: 'descending'}"
            show-summary
            :summary-method="getSummaries"
        >
          <el-table-column
              type="index"
              align="center"
              :index="indexMethod"
          >
          </el-table-column>
          <el-table-column
              prop="date"
              label="日期"
              sortable
              width="180"
          >
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="180"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
          >
          </el-table-column>
          <el-table-column
              prop="tag"
              label="标签"
              width="100"
              :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.tag === '家' ? 'primary' : 'success'"
                  close-transition
              >{{scope.row.tag}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100"
          >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </example-card>
  </div>
</template>

<script>
  export default {
    name: "grids_list_view",
    data() {
      return {
        tableData: [{
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }, {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "公司"
        }, {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }, {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "公司"
        }, {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }, {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "公司"
        }, {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }]
      };
    },
    methods: {
      indexMethod(index) {
        return index + 1;
      },
      handleClick(row) {
        console.log("clicked row: ", row);
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      getSummaries(param) {
        console.log(param);
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " 元";
          } else {
            sums[index] = "N/A";
          }
        });

        return sums;
      }
    }
  };
</script>

<style scoped>

</style>
